<template>
	<view class="home">
		<view class="flex flex-wrap">
			<view class="friendbtn flex align-center justify-center flex-direction position-relative"
				v-for="(item,index) in peoplelist" :key="index"
				:class="item.is_my==1?'border-1a':item.select==1?'border-1a':''" @click="choseFre(item.id,index)">
				<image :src="item.user.avatar" mode="" class="headimg"></image>
				<view class="flex align-center margin-top-10">
					<view class="text-28 flex-one text-cut-one">{{item.user.username}} </view>
					<view class="text-28" v-if="item.is_my==1"><text>（自己）</text></view>
				</view>
				<view class="text-24 text-99">时长：{{item.duration}}</view>
				<view class="text-24 text-99">费用：￥{{item.total}}</view>
				<view class="orderbtn" @click.stop="go('/pages/board/frienddetail?id='+item.id)">订单明细</view>
				<view
					:class="item.is_my==1 ? 'tyIcon-round-check' : item.select==1?'tyIcon-round-check': 'tyIcon-round'"
					class="xuan"></view>
			</view>
		</view>
		<view class="carbg flex align-center justify-between">
			<view class="text-28 padding-left-50">合计 ￥ <text>{{moeny}}</text> </view>
			<view class="paybtn" @click="getPay">确认帮TA支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				peoplelist: [],
				moeny: ""
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady() {
			this.rq.getData('order/payment_user_list', {
				id: this.id
			}).then(res => {
				if (res.code == 1) {
					this.peoplelist = res.data
					this.peoplelist.forEach((item, index) => {
						item.select = 0
						if(item.is_my==1){
							item.select = 1
							this.moeny = item.total
						}
					})
					console.log(this.peoplelist)
				}
			})
		},
		methods: {
			choseFre(id, index) {
				this.peoplelist.forEach((item, indexs) => {
					if (index == indexs) {
						if (item.is_my == 1) {
							return false
						} else {
							if (item.select == 0) {
								item.select = 1
								this.moeny = Number(this.moeny)+Number(item.total)
							} else {
								item.select = 0
								this.moeny = Number(this.moeny)-Number(item.total)
							}
						}
					}
				})
				this.peoplelist = JSON.parse(JSON.stringify(this.peoplelist))
			},
			getPay() {
				let filteredItems = this.peoplelist.filter(item => item.select == 1); //筛选
				let ids = filteredItems.map(item => item.id) //添加id
				console.log(ids)
				uni.setStorageSync('ids',ids)
				uni.setStorageSync('xjmon',this.moeny)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx;
	}

	.friendbtn {
		width: 214rpx;
		height: 326rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-right: 25rpx;
		margin-bottom: 30rpx;
	}

	.friendbtn:nth-child(3n) {
		margin-right: 0;
	}

	.headimg {
		width: 98rpx;
		height: 98rpx;
		border-radius: 50%;
	}

	.orderbtn {
		width: 162rpx;
		height: 60rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 5rpx;
	}

	.carbg {
		width: 690rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		position: absolute;
		bottom: 94rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.paybtn {
		width: 266rpx;
		height: 96rpx;
		background: #101010;
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}

	.border-1a {
		border: 2rpx solid #000000
	}

	.xuan {
		position: absolute;
		right: 4rpx;
		top: 4rpx;
		font-size: 44rpx;
	}
</style>